

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title>Drawing &mdash; LVGL  documentation</title>
  

  
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/fontawesome.min.css" type="text/css" />

  
  
    <link rel="shortcut icon" href="../_static/favicon.png"/>
  

  
  

  
    <link rel="canonical" href="https://docs.lvgl.io/v8.0/en/html/overview/drawing.html" />

  
  <!--[if lt IE 9]>
    <script src="../_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
        <script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
        <script src="../_static/jquery.js"></script>
        <script src="../_static/underscore.js"></script>
        <script src="../_static/doctools.js"></script>
    
    <script type="text/javascript" src="../_static/js/theme.js"></script>

    
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="New widget" href="new_widget.html" />
    <link rel="prev" title="Timers" href="timer.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="../index.html">
          

          
            
            <img src="../_static/logo_lvgl.png" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                8.0
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#key-features">Key features</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#requirements">Requirements</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#repository-layout">Repository layout</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#release-policy">Release policy</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#release-cycle">Release cycle</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#branches">Branches</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#changelog">Changelog</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#version-support">Version support</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#faq">FAQ</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#where-can-i-ask-questions">Where can I ask questions?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-mcu-hardware-supported">Is my MCU/hardware supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-display-supported">Is my display supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#nothing-happens-my-display-driver-is-not-called-what-have-i-missed">Nothing happens, my display driver is not called. What have I missed?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-is-the-display-driver-called-only-once-only-the-upper-part-of-the-display-is-refreshed">Why is the display driver called only once? Only the upper part of the display is refreshed.</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-do-i-see-only-garbage-on-the-screen">Why do I see only garbage on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-i-see-nonsense-colors-on-the-screen">Why I see nonsense colors on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-speed-up-my-ui">How to speed up my UI?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-flash-rom-usage">How to reduce flash/ROM usage?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-the-ram-usage">How to reduce the RAM usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-work-with-an-operating-system">How to work with an operating system?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../get-started/index.html">Get started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../get-started/quick-overview.html">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#get-started-in-a-simulator">Get started in a simulator</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#add-lvgl-into-your-project">Add LVGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#widgets">Widgets</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#parts">Parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#themes">Themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#id1">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#micropython">Micropython</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#install-eclipse-cdt">Install Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#install-sdl-2">Install SDL 2</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#pre-configured-project">Pre-configured project</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#add-the-pre-configured-project-to-eclipse-cdt">Add the pre-configured project to Eclipse CDT</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/pc-simulator.html#compile-and-run">Compile and Run</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/stm32.html">STM32</a></li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/nxp.html">NXP</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nxp.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nxp.html#adding-hw-acceleration-for-nxp-imx-rt-platforms-using-pxp-pixel-pipeline-engine-for-existing-projects">Adding HW acceleration for NXP iMX RT platforms using PXP (PiXel Pipeline) engine for existing projects</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#features-supported">Features supported:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#basic-configuration">Basic configuration:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#basic-initialization">Basic initialization:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#project-setup">Project setup:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nxp.html#advanced-configuration">Advanced configuration:</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/espressif.html">Espressif (ESP32)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#get-the-lvgl-demo-project-for-esp32">Get the LVGL demo project for ESP32</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#use-lvgl-in-your-esp32-project">Use LVGL in your ESP32 project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#prerequisites">Prerequisites</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#get-lvgl">Get LVGL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/espressif.html#use-lvgl-esp32-drivers-in-your-project">Use lvgl_esp32_drivers in your project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/espressif.html#support-for-esp32-s2">Support for ESP32-S2</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/arduino.html">Arduino</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#get-the-lvgl-ardunio-library">Get the LVGL Ardunio library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#set-up-drivers">Set up drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#configure-lvgl">Configure LVGL</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#configure-the-examples">Configure the examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#initialize-lvgl-and-run-an-example">Initialize LVGL and run an example</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/arduino.html#debugging-and-logging">Debugging and logging</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/micropython.html">Micropython</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#what-is-micropython">What is Micropython?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#highlights-of-micropython">Highlights of Micropython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#why-micropython-lvgl">Why Micropython + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#here-are-some-advantages-of-using-lvgl-in-micropython">Here are some advantages of using LVGL in Micropython:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#micropython-lvgl-could-be-used-for">Micropython + LVGL could be used for:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#so-what-does-it-look-like">So what does it look like?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#a-simple-example">A simple example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#how-can-i-use-it">How can I use it?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#online-simulator">Online Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#pc-simulator">PC Simulator</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/micropython.html#embedded-platform">Embedded platform</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/nuttx.html">NuttX RTOS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#what-is-nuttx">What is NuttX?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#highlights-of-nuttx">Highlights of NuttX</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#why-nuttx-lvgl">Why NuttX + LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#here-are-some-advantages-of-using-lvgl-in-nuttx">Here are some advantages of using LVGL in NuttX</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#nuttx-lvgl-could-be-used-for">NuttX + LVGL could be used for</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#how-to-get-started-with-nuttx-and-lvgl">How to get started with NuttX and LVGL?</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#first-you-need-to-install-the-pre-requisite-on-your-system">First you need to install the pre-requisite on your system</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#now-let-s-to-create-a-workspace-to-save-our-files">Now let's to create a workspace to save our files</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#clone-the-nuttx-and-apps-repositories">Clone the NuttX and Apps repositories:</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#configure-nuttx-to-use-the-stm32f429i-disco-board-and-the-lvgl-demo">Configure NuttX to use the stm32f429i-disco board and the LVGL Demo</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/nuttx.html#flashing-the-firmware-in-the-board-using-openocd">Flashing the firmware in the board using OpenOCD:</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/nuttx.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../porting/project.html">Set-up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#draw-buffer">Draw buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#display-driver">Display driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#mandatory-fields">Mandatory fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#optional-fields">Optional fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#rotation">Rotation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#parameters">Parameters</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#feedback">Feedback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#associating-with-a-display">Associating with a display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#buffered-reading">Buffered reading</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/task-handler.html">Task Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#printing-logs">Printing logs</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#custom-log-function">Custom log function</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Overview</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="object.html#attributes">Attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#working-mechanisms">Working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-and-delete-objects">Create and delete objects</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-screens">Create screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#get-the-active-screen">Get the active screen</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#load-screens">Load screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#handling-multiple-displays">Handling multiple displays</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="object.html#states">States</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="coords.html">Positions, sizes, and layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="coords.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#units">Units</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#boxing-model">Boxing model</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#important-notes">Important notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#position">Position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#simple-way">Simple way</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#align">Align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#size">Size</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#id1">Simple way</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#using-styles">Using styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#translation">Translation</a></li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#transformation">Transformation</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#min-and-max-size">Min and Max size</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#layout">Layout</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#id2">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#built-in-layout">Built-in layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#adding-new-layouts">Adding new layouts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#cascading-styles">Cascading styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#inheritance">Inheritance</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#initialize-styles-and-set-get-properties">Initialize styles and set/get properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#add-and-remove-styles-to-a-widget">Add and remove styles to a widget</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#add-styles">Add styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#remove-styles">Remove styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#report-style-changes">Report style changes</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#get-a-property-s-value-on-an-object">Get a property's value on an object</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#properties">Properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#typical-background-properties">Typical background properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#transitions">Transitions</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#color-filter">Color filter</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#extending-themes">Extending themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style-props.html">Style properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#size-and-position">Size and position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#width">width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-width">min_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-width">max_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#height">height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-height">min_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-height">max_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#x">x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#y">y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#align">align</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-width">transform_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-height">transform_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-x">translate_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-y">translate_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-zoom">transform_zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-angle">transform_angle</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#padding">Padding</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-top">pad_top</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-bottom">pad_bottom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-left">pad_left</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-right">pad_right</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-row">pad_row</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-column">pad_column</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#miscellaneous">Miscellaneous</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#radius">radius</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#clip-corner">clip_corner</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#opa">opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-dsc">color_filter_dsc</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-opa">color_filter_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-time">anim_time</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-speed">anim_speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transition">transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#blend-mode">blend_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#layout">layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#base-dir">base_dir</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#background">Background</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-color">bg_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-opa">bg_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-color">bg_grad_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-dir">bg_grad_dir</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-main-stop">bg_main_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-stop">bg_grad_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-src">bg_img_src</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-opa">bg_img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor">bg_img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor-opa">bg_img_recolor_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-tiled">bg_img_tiled</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#border">Border</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-color">border_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-opa">border_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-width">border_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-side">border_side</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-post">border_post</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#text">Text</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-color">text_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-opa">text_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-font">text_font</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-letter-space">text_letter_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-line-space">text_line_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-decor">text_decor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-align">text_align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-opa">img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor">img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor-opa">img_recolor_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#outline">Outline</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-width">outline_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-color">outline_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-opa">outline_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-pad">outline_pad</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#shadow">Shadow</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-width">shadow_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-x">shadow_ofs_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-y">shadow_ofs_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-spread">shadow_spread</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-color">shadow_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-opa">shadow_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-width">line_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-width">line_dash_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-gap">line_dash_gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-rounded">line_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-color">line_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-opa">line_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-width">arc_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-rounded">arc_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-color">arc_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-opa">arc_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-img-src">arc_img_src</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="scroll.html">Scroll</a><ul>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scrollbar">Scrollbar</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#basic-example">Basic example</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#features-of-scrolling">Features of scrolling</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scrollable">Scrollable</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-chain">Scroll chain</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-momentum">Scroll momentum</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#elastic-scroll">Elastic scroll</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#snapping">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-one">Scroll one</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-on-focus">Scroll on focus</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#scroll-manually">Scroll manually</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#self-size">Self size</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#bring-to-the-foreground">Bring to the foreground</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="event.html#add-events-to-the-object">Add events to the object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#remove-event-s-from-an-object">Remove event(s) from an object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-codes">Event codes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#input-device-events">Input device events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#drawing-events">Drawing events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#other-events">Other events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#special-events">Special events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#custom-events">Custom events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#sending-events">Sending events</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#refresh-event">Refresh event</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#fields-of-lv-event-t">Fields of lv_event_t</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-bubbling">Event bubbling</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#micropython">MicroPython</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="indev.html#pointers">Pointers</a></li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#styling">Styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="display.html#multiple-display-support">Multiple display support</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#split-image">Split image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#transparent-screens">Transparent screens</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#inactivity">Inactivity</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#background">Background</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="color.html">Colors</a><ul>
<li class="toctree-l3"><a class="reference internal" href="color.html#creating-colors">Creating colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#rgb">RGB</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#hsv">HSV</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#modify-and-mix-colors">Modify and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#opacity">Opacity</a></li>
<li class="toctree-l3"><a class="reference internal" href="color.html#color-types">Color types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#convert-color">Convert color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#built-in-fonts">Built-in fonts</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#normal-fonts">Normal fonts</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#special-fonts">Special fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#arabic-and-persian-support">Arabic and Persian support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#compress-fonts">Compress fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-font">Add new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#load-font-at-run-time">Load font at run-time</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-a-new-font-engine">Add a new font engine</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="image.html">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="image.html#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="image.html#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="image.html#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="image.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="image.html#image-buffer">Image buffer</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#ready-to-use-drivers">Ready to use drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#add-a-driver">Add a driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#registering-a-driver">Registering a driver</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#implementing-the-callbacks">Implementing the callbacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#other-callbacks">Other callbacks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#use-drivers-for-images">Use drivers for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="animation.html">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="animation.html#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="animation.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="animation.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="timer.html">Timers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="timer.html#create-a-timer">Create a timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#repeat-count">Repeat count</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
<li class="toctree-l3"><a class="reference internal" href="#masking">Masking</a></li>
<li class="toctree-l3"><a class="reference internal" href="#hook-drawing">Hook drawing</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#main-drawing">Main drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="#post-drawing">Post drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="#part-drawing">Part drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="new_widget.html">New widget</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../widgets/index.html">Widgets</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../widgets/obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#screens">Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/core/index.html">Core widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btnmatrix.html">Button matrix (lv_btnmatrix)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/checkbox.html">Checkbox (lv_checkbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/dropdown.html">Drop-down list (lv_dropdown)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#id1">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/img.html">Image (lv_img)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#transformations">Transformations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/label.html">Label (lv_label)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/line.html">Line (lv_line)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/switch.html">Switch (lv_switch)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/table.html">Table (lv_table)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/textarea.html">Text area (lv_textarea)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/extra/index.html">Extra widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#headers">Headers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/chart.html">Chart (lv_chart)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/colorwheel.html">Color wheel (lv_colorwheel)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/keyboard.html">Keyboard (lv_keyboard)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#examples">Examples</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/led.html">LED (lv_led)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/list.html">List (lv_list)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/meter.html">Meter (lv_meter)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/msgbox.html">Message box (lv_msgbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/span.html">Span (lv_span)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#api">API</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinner.html">Spinner (lv_spinner)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/win.html">Window (lv_win)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#get-the-parts">Get the parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../layouts/index.html">Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../layouts/flex.html">Flex</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-flow">Flex flow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-align">Flex align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-grow">Flex grow</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#rtl">RTL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#new-track">New track</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../layouts/grid.html">Grid</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-descriptors">Grid descriptors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-items">Grid items</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-align">Grid align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#style-interface">Style interface</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#rtl">RTL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#c">C</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#micropython">MicroPython</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CONTRIBUTING.html">Contributing</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#introduction">Introduction</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#pull-request">Pull request</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-github">From GitHub</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-command-line">From command line</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#developer-certification-of-origin-dco">Developer Certification of Origin (DCO)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#accepted-licenses-and-copyright-notices">Accepted licenses and copyright notices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#your-own-work">Your own work</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-code-from-online-source">Use code from online source</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-mit-licensed-code">Use MIT licensed code</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-gpl-licensed-code">Use GPL licensed code</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#ways-to-contribute">Ways to contribute</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#give-lvgl-a-star">Give LVGL a Star</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#tell-what-you-have-achieved">Tell what you have achieved</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#write-examples">Write examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#improve-the-docs">Improve the docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#report-bugs">Report bugs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#send-fixes">Send fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#join-the-conversations-in-the-forum">Join the conversations in the Forum</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#add-features">Add features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#become-a-maintainer">Become a maintainer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#move-your-project-repository-under-lvgl-organization">Move your project repository under LVGL organization</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CHANGELOG.html">Changelog</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-2-16-07-2021">v8.0.2 (16.07.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-1-14-06-2021">v8.0.1 (14.06.2021)</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-0-0-01-06-2021">v8.0.0 (01.06.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#directory-structure">Directory structure</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#widget-changes">Widget changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-scrolling">New scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-layouts">New layouts</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#styles">Styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#events">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#driver-changes">Driver changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#other-changes">Other changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-release-policy">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v7-to-v8">Migrating from v7 to v8</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-11-0-16-03-2021">v7.11.0 (16.03.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-features">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#bugfixes">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-1-16-02-2021">v7.10.1 (16.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id1">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-10-0-02-02-2021">v7.10.0 (02.02.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id2">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id3">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-1-19-01-2021">v7.9.1 (19.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id4">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-9-0-05-01-2021">v7.9.0 (05.01.2021)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id5">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id6">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-1-15-12-2020">v7.8.1 (15.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id7">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-8-0-01-12-2020">v7.8.0 (01.12.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id8">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id9">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-2-17-11-2020">v7.7.2 (17.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id10">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-1-03-11-2020">v7.7.1 (03.11.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id11">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-7-0-20-10-2020">v7.7.0 (20.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id12">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id13">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-1-06-10-2020">v7.6.1 (06.10.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id14">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-6-0-22-09-2020">v7.6.0 (22.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id15">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id16">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-5-0-15-09-2020">v7.5.0 (15.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id17">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id18">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-4-0-01-09-2020">v7.4.0 (01.09.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id19">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id20">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-1-18-08-2020">v7.3.1 (18.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id21">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-3-0-04-08-2020">v7.3.0 (04.08.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id22">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id23">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-2-0-21-07-2020">v7.2.0 (21.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id24">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id25">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-1-0-07-07-2020">v7.1.0 (07.07.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id26">New features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id27">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-2-16-06-2020">v7.0.2 (16.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id28">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-1-01-06-2020">v7.0.1 (01.06.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id29">Bugfixes</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v7-0-0-18-05-2020">v7.0.0 (18.05.2020)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#documentation">Documentation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#legal-changes">Legal changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-drawing-system">New drawing system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-style-system">New style system</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#gpu-integration">GPU integration</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#renames">Renames</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#reworked-and-improved-object">Reworked and improved object</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-object-types">New object types</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#others">Others</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#demos">Demos</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#id30">New release policy</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#migrating-from-v6-to-v7">Migrating from v6 to v7</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../ROADMAP.html">Roadmap</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8-x">v8.X</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#ideas">Ideas</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8">v8</a></li>
</ul>
</li>
</ul>

            
          
        </div>
        
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../index.html">LVGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          



















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="../index.html" class="icon icon-home"></a> &raquo;</li>
        
          <li><a href="index.html">Overview</a> &raquo;</li>
        
      <li>Drawing</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
          
            
              <!-- User defined GitHub URL -->
              <a href="https://github.com/lvgl/lvgl/blob/5d0ba633a5dc8bb1c3e3714461b6839f205a69fa/docs/overview/drawing.md" class="fa fa-github"> Edit on GitHub</a>
            
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="drawing">
<h1>Drawing<a class="headerlink" href="#drawing" title="Permalink to this headline">¶</a></h1>
<p>With LVGL, you don't need to draw anything manually. Just create objects (like buttons, labels, arc, etc), move and change them, and LVGL will refresh and redraw what is required.</p>
<p>However, it might be useful to have a basic understanding of how drawing happens in LVGL to add customization, make it easier to find bugs or just out of curiosity.</p>
<p>The basic concept is to not draw directly to the screen, but draw to an internal draw buffer first. When drawing (rendering) is ready, that buffer is copied to the screen.</p>
<p>The draw buffer can be smaller than the screen's size. LVGL will simply render in &quot;tiles&quot; that fit into the given draw buffer.</p>
<p>This approach has two main advantages compared to directly drawing to the screen:</p>
<ol class="simple">
<li><p>It avoids flickering while the layers of the UI are drawn. For example, if LVGL drawn directly into the display, when drawing a <em>background + button + text</em>, each &quot;stage&quot; would be visible for a short time .</p></li>
<li><p>It's faster to modify a buffer in internal RAM and finally write one pixel only once than reading/writing the display directly on each pixel access.
(e.g. via a display controller with SPI interface).</p></li>
</ol>
<p>Note that this concept is different from &quot;traditional&quot; double buffering where there are 2 screen sized frame buffers:
one holds the current image to show on the display, and rendering happens to the other (inactive) frame buffer, and they are swapped when the rendering is finished.
The main difference is that with LVGL you don't have to store 2 frame buffers (which usually requires external RAM) but only smaller draw buffer(s) that can easily fit into the internal RAM too.</p>
<div class="section" id="mechanism-of-screen-refreshing">
<h2>Mechanism of screen refreshing<a class="headerlink" href="#mechanism-of-screen-refreshing" title="Permalink to this headline">¶</a></h2>
<p>Be sure to get familiar with the <a class="reference internal" href="../porting/display.html"><span class="doc">Buffering modes of LVGL</span></a> first.</p>
<p>LVGL refreshes the screen in the following steps:</p>
<ol class="simple">
<li><p>Something happens on the UI which requires redrawing. For example, a button is pressed, a chart is changed, an animation happened, etc.</p></li>
<li><p>LVGL saves the changed object's old and new area into a buffer, called an <em>Invalid area buffer</em>. For optimization, in some cases, objects are not added to the buffer:</p>
<ul class="simple">
<li><p>Hidden objects are not added.</p></li>
<li><p>Objects completely out of their parent are not added.</p></li>
<li><p>Areas partially out of the parent are cropped to the parent's area.</p></li>
<li><p>The objects on other screens are not added.</p></li>
</ul>
</li>
<li><p>In every <code class="docutils literal notranslate"><span class="pre">LV_DISP_DEF_REFR_PERIOD</span></code> (set in <code class="docutils literal notranslate"><span class="pre">lv_conf.h</span></code>) the followings happen:</p>
<ul class="simple">
<li><p>LVGL checks the invalid areas and joins the adjacent or intersecting areas.</p></li>
<li><p>Takes the first joined area, if it's smaller than the <em>draw buffer</em>, then simply render the area's content into the <em>draw buffer</em>.
If the area doesn't fit into the buffer, draw as many lines as possible to the <em>draw buffer</em>.</p></li>
<li><p>When the area is rendered, call <code class="docutils literal notranslate"><span class="pre">flush_cb</span></code> from the display driver to refresh the display.</p></li>
<li><p>If the area was larger than the buffer, render the remaining parts too.</p></li>
<li><p>Do the same with all the joined areas.</p></li>
</ul>
</li>
</ol>
<p>When an area is redrawn, the library searches the top most object which covers that area, and starts drawing from that object.
For example, if a button's label has changed, the library will see that it's enough to draw the button under the text, and that it's not required to draw the screen under the button too.</p>
<p>The difference between buffering modes regarding the drawing mechanism is the following:</p>
<ol class="simple">
<li><p><strong>One buffer</strong> - LVGL needs to wait for <code class="docutils literal notranslate"><span class="pre">lv_disp_flush_ready()</span></code> (called from <code class="docutils literal notranslate"><span class="pre">flush_cb</span></code>) before starting to redraw the next part.</p></li>
<li><p><strong>Two buffers</strong> -  LVGL can immediately draw to the second buffer when the first is sent to <code class="docutils literal notranslate"><span class="pre">flush_cb</span></code> because the flushing should be done by DMA (or similar hardware) in the background.</p></li>
<li><p><strong>Double buffering</strong> -  <code class="docutils literal notranslate"><span class="pre">flush_cb</span></code> should only swap the address of the frame buffer.</p></li>
</ol>
</div>
<div class="section" id="masking">
<h2>Masking<a class="headerlink" href="#masking" title="Permalink to this headline">¶</a></h2>
<p><em>Masking</em> is the basic concept of LVGL's draw engine.
To use LVGL it's not required to know about the mechanisms described here, but you might find interesting to know how drawing works under hood.
Knowing about masking comes in handy if you want to customize drawing.</p>
<p>To learn masking let's learn the steps of drawing first.
LVGL performs the following steps to render any shape, image or text. It can be considered as a drawing pipeline.</p>
<ol class="simple">
<li><p><strong>Prepare the draw descriptors</strong> Create a draw descriptor from an object's styles (e.g. <code class="docutils literal notranslate"><span class="pre">lv_draw_rect_dsc_t</span></code>).  This gives us the parameters for drawing, for example the colors, widths, opacity, fonts, radius, etc.</p></li>
<li><p><strong>Call the draw function</strong> Call the draw function with the draw descriptor and some other parameters (e.g. <code class="docutils literal notranslate"><span class="pre">lv_draw_rect()</span></code>).  It renders the primitive shape to the current draw buffer.</p></li>
<li><p><strong>Create masks</strong> If the shape is very simple and doesn't require masks go to #5.  Else create the required masks (e.g. a rounded rectangle mask)</p></li>
<li><p><strong>Calculate all the added mask</strong>. It creates 0..255 values into a <em>mask buffer</em> with the &quot;shape&quot; of the created masks.
E.g. in case of a &quot;line mask&quot; according to the parameters of the mask, keep one side of the buffer as it is (255 by default) and set the rest to 0 to indicate that this side should be removed.</p></li>
<li><p><strong>Blend a color or image</strong> During blending masks (make some pixels transparent or opaque), blending modes (additive, subtractive, etc) and opacity are handled.</p></li>
</ol>
<p>LVGL has the following built-in mask types which can be calculated and applied real-time:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DRAW_MASK_TYPE_LINE</span></code> Removes a side from a line (top, bottom, left or right). <code class="docutils literal notranslate"><span class="pre">lv_draw_line</span></code> uses 4 of it.
Essentially, every (skew) line is bounded with 4 line masks by forming a rectangle.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DRAW_MASK_TYPE_RADIUS</span></code> Removes the inner or outer parts of a rectangle which can have radius. It's also used to create circles by setting the radius to large value (<code class="docutils literal notranslate"><span class="pre">LV_RADIUS_CIRCLE</span></code>)</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DRAW_MASK_TYPE_ANGLE</span></code> Removes a circle sector. It is used by <code class="docutils literal notranslate"><span class="pre">lv_draw_arc</span></code> to remove the &quot;empty&quot; sector.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DRAW_MASK_TYPE_FADE</span></code> Create a vertical fade (change opacity)</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_DRAW_MASK_TYPE_MAP</span></code> The mask is stored in an array and the necessary parts are applied</p></li>
</ul>
<p>Masks are used the create almost every basic primitives:</p>
<ul class="simple">
<li><p><strong>letters</strong> Create a mask from the letter and draw a rectangle with the letter's color considering the mask.</p></li>
<li><p><strong>line</strong> Created from 4 &quot;line masks&quot;, to mask out the left, right, top and bottom part of the line to get perfectly perpendicular line ending.</p></li>
<li><p><strong>rounded rectangle</strong> A mask is created real-time to add radius to the corners.</p></li>
<li><p><strong>clip corner</strong> To clip to overflowing content (usually children) on the rounded corners also a rounded rectangle mask is applied.</p></li>
<li><p><strong>rectangle border</strong> Same as a rounded rectangle, but inner part is masked out too.</p></li>
<li><p><strong>arc drawing</strong> A circle border is drawn, but an arc mask is applied too.</p></li>
<li><p><strong>ARGB images</strong> The alpha channel is separated into a mask and the image is drawn as a normal RGB image.</p></li>
</ul>
</div>
<div class="section" id="hook-drawing">
<h2>Hook drawing<a class="headerlink" href="#hook-drawing" title="Permalink to this headline">¶</a></h2>
<p>Although widgets can be very well customized by styles there might be cases when something really custom is required.
To ensure a great level of flexibility LVGL sends a lot events during drawing with parameters that tell what LVGL is about to draw.
Some fields of these parameters can be modified to draw something else or any custom drawing can be added manually.</p>
<p>A good use case for it is the <a class="reference internal" href="../widgets/core/btnmatrix.html"><span class="doc">Button matrix</span></a> widget. By default its buttons can be styled in different states but you can't style the buttons one by one.
However, an event is sent for every button and you can for example tell LVGL to use different colors on a specific button or to manually draw an image on some buttons.</p>
<p>Below each of these events are described in detail.</p>
<div class="section" id="main-drawing">
<h3>Main drawing<a class="headerlink" href="#main-drawing" title="Permalink to this headline">¶</a></h3>
<p>These events are related to the actual drawing of the object. E.g. drawing of buttons, texts, etc happens here.</p>
<p><code class="docutils literal notranslate"><span class="pre">lv_event_get_clip_area(event)</span></code> can be used to get the current clip area. The clip area is required in draw functions to make them draw only on a limited area.</p>
<div class="section" id="lv-event-draw-main-begin">
<h4>LV_EVENT_DRAW_MAIN_BEGIN<a class="headerlink" href="#lv-event-draw-main-begin" title="Permalink to this headline">¶</a></h4>
<p>Sent before starting to draw an object. This is a good place to add masks manually. E.g. add a line mask that &quot;removes&quot; the right side of an object.</p>
</div>
<div class="section" id="lv-event-draw-main">
<h4>LV_EVENT_DRAW_MAIN<a class="headerlink" href="#lv-event-draw-main" title="Permalink to this headline">¶</a></h4>
<p>The actual drawing of the object happens in this event. E.g. a rectangle for a button is drawn here. First, the widgets' internal events are called to perform drawing and after that you can draw anything on top of them.
For example you can add a custom text or an image.</p>
</div>
<div class="section" id="lv-event-draw-main-end">
<h4>LV_EVENT_DRAW_MAIN_END<a class="headerlink" href="#lv-event-draw-main-end" title="Permalink to this headline">¶</a></h4>
<p>Called when the main drawing is finished. You can draw anything here as well and it's also good place to remove the masks created in <code class="docutils literal notranslate"><span class="pre">LV_EVENT_DRAW_MAIN_BEGIN</span></code>.</p>
</div>
</div>
<div class="section" id="post-drawing">
<h3>Post drawing<a class="headerlink" href="#post-drawing" title="Permalink to this headline">¶</a></h3>
<p>Post drawing events are called when all the children of an object are drawn. For example LVGL use the post drawing phase to draw the scrollbars because they should be above all the children.</p>
<p><code class="docutils literal notranslate"><span class="pre">lv_event_get_clip_area(event)</span></code> can be used to get the current clip area.</p>
<div class="section" id="lv-event-draw-post-begin">
<h4>LV_EVENT_DRAW_POST_BEGIN<a class="headerlink" href="#lv-event-draw-post-begin" title="Permalink to this headline">¶</a></h4>
<p>Sent before starting the post draw phase. Masks can be added here too to mask out the post drawn content.</p>
</div>
<div class="section" id="lv-event-draw-post">
<h4>LV_EVENT_DRAW_POST<a class="headerlink" href="#lv-event-draw-post" title="Permalink to this headline">¶</a></h4>
<p>The actual drawing should happen here.</p>
</div>
<div class="section" id="lv-event-draw-post-end">
<h4>LV_EVENT_DRAW_POST_END<a class="headerlink" href="#lv-event-draw-post-end" title="Permalink to this headline">¶</a></h4>
<p>Called when post drawing has finished. If the masks were not removed in <code class="docutils literal notranslate"><span class="pre">LV_EVENT_DRAW_MAIN_END</span></code> they should be removed here.</p>
</div>
</div>
<div class="section" id="part-drawing">
<h3>Part drawing<a class="headerlink" href="#part-drawing" title="Permalink to this headline">¶</a></h3>
<p>When LVGL draws a part of an object (e.g. a slider's indicator, a table's cell or a button matrix's button) it sends events before and after drawing that part with some context of the drawing.
It allows changing the parts on a very low level with masks, extra drawing, or changing the parameters that LVGL is planning to use for drawing.</p>
<p>In these events an <code class="docutils literal notranslate"><span class="pre">lv_obj_draw_part_t</span></code> structure is used to describe the context of the drawing. Not all fields are set for every part and widget.
To see which fields are set for a widget see the widget's documentation.</p>
<p><code class="docutils literal notranslate"><span class="pre">lv_obj_draw_part_t</span></code> has the following fields:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="c1">// Always set</span>
<span class="k">const</span> <span class="n">lv_area_t</span> <span class="o">*</span> <span class="n">clip_area</span><span class="p">;</span>        <span class="c1">// The current clip area, required if you need to draw something in the event</span>
<span class="kt">uint32_t</span> <span class="n">part</span><span class="p">;</span>                      <span class="c1">// The current part for which the event is sent</span>
<span class="kt">uint32_t</span> <span class="n">id</span><span class="p">;</span>                        <span class="c1">// The index of the part. E.g. a button&#39;s index on button matrix or table cell index.</span>

<span class="c1">// Draw desciptors, set only if related</span>
<span class="n">lv_draw_rect_dsc_t</span> <span class="o">*</span> <span class="n">rect_dsc</span><span class="p">;</span>      <span class="c1">// A draw descriptor that can be modified to changed what LVGL will draw. Set only for rectangle-like parts</span>
<span class="n">lv_draw_label_dsc_t</span> <span class="o">*</span> <span class="n">label_dsc</span><span class="p">;</span>    <span class="c1">// A draw descriptor that can be modified to changed what LVGL will draw. Set only for text-like parts</span>
<span class="n">lv_draw_line_dsc_t</span> <span class="o">*</span> <span class="n">line_dsc</span><span class="p">;</span>      <span class="c1">// A draw descriptor that can be modified to changed what LVGL will draw. Set only for line-like parts</span>
<span class="n">lv_draw_img_dsc_t</span> <span class="o">*</span>  <span class="n">img_dsc</span><span class="p">;</span>       <span class="c1">// A draw descriptor that can be modified to changed what LVGL will draw. Set only for image-like parts</span>
<span class="n">lv_draw_arc_dsc_t</span> <span class="o">*</span>  <span class="n">arc_dsc</span><span class="p">;</span>       <span class="c1">// A draw descriptor that can be modified to changed what LVGL will draw. Set only for arc-like parts</span>

<span class="c1">// Other paramters </span>
<span class="n">lv_area_t</span> <span class="o">*</span> <span class="n">draw_area</span><span class="p">;</span>              <span class="c1">// The area of the part being drawn</span>
<span class="k">const</span> <span class="n">lv_point_t</span> <span class="o">*</span> <span class="n">p1</span><span class="p">;</span>              <span class="c1">// A point calculated during drawing. E.g. a point of chart or the center of an arc.</span>
<span class="k">const</span> <span class="n">lv_point_t</span> <span class="o">*</span> <span class="n">p2</span><span class="p">;</span>              <span class="c1">// A point calculated during drawing. E.g. a point of chart.</span>
<span class="kt">char</span> <span class="n">text</span><span class="p">[</span><span class="mi">16</span><span class="p">];</span>                      <span class="c1">// A text calculated during drawing. Can be modified. E.g. tick labels on a chart axis.</span>
<span class="n">lv_coord_t</span> <span class="n">radius</span><span class="p">;</span>                  <span class="c1">// E.g. the radius of an arc (not the corner radius).</span>
<span class="kt">int32_t</span> <span class="n">value</span><span class="p">;</span>                      <span class="c1">// A value calculated during drawing. E.g. Chart&#39;s tick line value.</span>
<span class="k">const</span> <span class="kt">void</span> <span class="o">*</span> <span class="n">sub_part_ptr</span><span class="p">;</span>          <span class="c1">// A pointer the identifies something in the part. E.g. chart series. </span>
</pre></div>
</div>
<p><code class="docutils literal notranslate"><span class="pre">lv_event_get_draw_part_dsc(event)</span></code> can be used to get a pointer to <code class="docutils literal notranslate"><span class="pre">lv_obj_draw_part_t</span></code>.</p>
<div class="section" id="lv-event-draw-part-begin">
<h4>LV_EVENT_DRAW_PART_BEGIN<a class="headerlink" href="#lv-event-draw-part-begin" title="Permalink to this headline">¶</a></h4>
<p>Start the drawing of a part. This is a good place to modify the draw descriptors (e.g. <code class="docutils literal notranslate"><span class="pre">rect_dsc</span></code>), or add masks.</p>
</div>
<div class="section" id="lv-event-draw-part-end">
<h4>LV_EVENT_DRAW_PART_END<a class="headerlink" href="#lv-event-draw-part-end" title="Permalink to this headline">¶</a></h4>
<p>Finish the drawing of a part. This is a good place to draw extra content on the part, or remove the masks added in <code class="docutils literal notranslate"><span class="pre">LV_EVENT_DRAW_PART_BEGIN</span></code>.</p>
</div>
</div>
<div class="section" id="others">
<h3>Others<a class="headerlink" href="#others" title="Permalink to this headline">¶</a></h3>
<div class="section" id="lv-event-cover-check">
<h4>LV_EVENT_COVER_CHECK<a class="headerlink" href="#lv-event-cover-check" title="Permalink to this headline">¶</a></h4>
<p>This event is used to check whether an object fully covers an area or not.</p>
<p><code class="docutils literal notranslate"><span class="pre">lv_event_get_cover_area(event)</span></code> returns an pointer to an area to check and <code class="docutils literal notranslate"><span class="pre">lv_event_set_cover_res(event,</span> <span class="pre">res)</span></code> can be used to set one of these results:</p>
<ul class="simple">
<li><p><code class="docutils literal notranslate"><span class="pre">LV_COVER_RES_COVER</span></code> the areas is fully covered by the object</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_COVER_RES_NOT_COVER</span></code> the areas is not covered by the object</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">LV_COVER_RES_MASKED</span></code> there is a mask on the object so it can not cover the area</p></li>
</ul>
<p>Here are some reasons why an object would be unable to fully cover an area:</p>
<ul class="simple">
<li><p>It's simply not fully in area</p></li>
<li><p>It has a radius</p></li>
<li><p>It has not 100% background opacity</p></li>
<li><p>It's an ARGB or chroma keyed image</p></li>
<li><p>It does not have normal blending mode. In this case LVGL needs to know the colors under the object to do the blending properly</p></li>
<li><p>It's a text, etc</p></li>
</ul>
<p>In short if for any reason the area below the object is visible than it doesn't cover that area.</p>
<p>Before sending this event LVGL checks if at least the widget's coordinates fully cover the area or not. If not the event is not called.</p>
<p>You need to check only the drawing you have added. The existing properties known by widget are handled in the widget's internal events.
E.g. if a widget has &gt; 0 radius it might not cover an area but you need to handle <code class="docutils literal notranslate"><span class="pre">radius</span></code> only if you will modify it and the widget can't know about it.</p>
</div>
<div class="section" id="lv-event-refr-ext-draw-size">
<h4>LV_EVENT_REFR_EXT_DRAW_SIZE<a class="headerlink" href="#lv-event-refr-ext-draw-size" title="Permalink to this headline">¶</a></h4>
<p>If you need to draw outside of a widget LVGL needs to know about it to provide the extra space for drawing.
Let's say you create an event the writes the current value of a slider above its knob. In this case LVGL needs to know that the slider's draw area should be larger with the size required for the text.</p>
<p>You can simple set the required draw area with <code class="docutils literal notranslate"><span class="pre">lv_event_set_ext_draw_size(e,</span> <span class="pre">size)</span></code>.</p>
</div>
</div>
</div>
</div>


           </div>
           
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="new_widget.html" class="btn btn-neutral float-right" title="New widget" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
        <a href="timer.html" class="btn btn-neutral float-left" title="Timers" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>
        &#169; Copyright 2020, LVGL LLC.
      <span class="lastupdated">
        Last updated on Jan 10, 2022.
      </span>

    </p>
  </div>
    
    
    
    Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    
    provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>
        </div>
      </div>

    </section>

  </div>
  

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

<style>
  .wy-side-nav-search > div[role="search"] {
    color: black;
  }
</style>
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>

<script type="text/javascript">
function add_version_selector()
{
    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
        .then(res => res.text())
        .then(text => {
            const versions = text.split("\n").filter(version => version.trim().length > 0);
            let p = document.getElementById("rtd-search-form").parentElement;
            p.innerHTML = `
            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
            ${versions.map(version => {
                const versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                return `<option value="${version}">${versionName}</option>`;
            })}
            </select>` + p.innerHTML;
        });
}

function ver_sel()
{
  var x = document.getElementById("versions").value;
  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
}

document.addEventListener('DOMContentLoaded', (event) => {
    add_version_selector().then(() => {
        var value = window.location.pathname.split('/')[1];
        document.getElementById("versions").value = value;
    });
    
})
</script>


</body>
</html>